<template>
  <div>
    <el-card class="box-card">
      <div class="card-query-body">
        <div class="demo-form-inline">
          <el-form>
            <el-form-item class="query-form-item">
              <el-input placeholder="审批人" v-model="keyWord"></el-input>
            </el-form-item>
          </el-form>

          <el-button
            icon="el-icon-search"
            type="primary"
            class="btnQuery"
            @click="handleQuery"
            >查询</el-button
          >
        </div>
        <div>
          <el-button
            icon="el-icon-document-add"
            type="primary"
            @click="handleAdd"
            >新增</el-button
          >
          <el-button
            icon="el-icon-refresh"
            type="primary"
            @click="handleRefresh"
            >刷新</el-button
          >
        </div>
      </div>
    </el-card>
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column label="Id" prop="id"> </el-table-column>
      <el-table-column label="用户名" prop="username"> </el-table-column>
      <el-table-column label="昵称" prop="nickname"> </el-table-column>
      <el-table-column label="头像" prop="nickname"> </el-table-column>
      <el-table-column label="备注" prop="remarks"> </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 增加和修改需要使用的模态框 -->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="formData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" label-width="120px">
          <el-input v-model="formData.nickname " autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" label-width="120px">
          <el-input v-model="formData.avatar" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="120px">
          <el-input v-model="formData.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="prev, pager, next, jumper,sizes, total"
        :total="pager.rowsTotal"
        @current-change="handlePageIndexChange"
        @size-change="handlePageSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, addUser, modUser } from "../api/users";
export default {
  data() {
    return {
      keyWord: "", // 查询关键字
      tableData: [],
      pager: {
        pageIndex: 5, // 页码
        pageSize: 100, // 页面大小（每页项目的数量）
        rowsTotal: 30, // 总记录数
      },
      formData: {
        id: 0,
        username: "",
        password: "113",
        nickname:'',
        avatar:'',
        remarks: "",
      },
      currentIndex: 0,
      dialogFormVisible: false,
    };
  },
  methods: {
    handleAdd() {
      this.dialogFormVisible = true;
      this.formData.id = 0;
      this.formData.username = "";
      this.formData.nickname = "";
      this.formData.avatar = "";
      this.formData.remarks = "";
    },
    handleRefresh() {
      this.fetchData(this.pager);
    },
    handleQuery() {
      this.fetchData();
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.formData.id = row.id;
      this.formData.username = row.username;
      this.formData.nickname = row.nickname;
      this.formData.avatar = row.avatar;
      this.formData.remarks = row.remarks;

      this.currentIndex = index;
      // console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSave() {
      this.dialogFormVisible = false;
      console.log(this.formData);
      if (this.formData.id === 0) {
        addUser(this.formData).then((res) => {
          console.log(res);
          this.tableData.push(res.data);
        });
      } else {
        modUser(this.formData.id, this.formData).then((res) => {
          console.log(res);
          this.tableData.splice(this.currentIndex, 1, res.data);
        });
      }
    },
    handleCancel() {
      this.dialogFormVisible = false;
    },
    // 改变页码后，重新拉取数据
    handlePageIndexChange(val) {
      this.pager.pageIndex = val;
      this.fetchData(this.pager);
    },
    // 改变页大小后，重新拉取数据
    handlePageSizeChange(val) {
      this.pager.pageSize = val;
      this.fetchData(this.pager);
    },
    
    // 拉取数据方法
    fetchData() {
      let params = {
        keyword: this.keyWord,
        pager: this.pager,
      };


      getList(params)
        .then((res) => {
          this.tableData = res.data.data;
          this.pager = res.data.pager;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.fetchData(this.pager);
  },
};
</script>
<style scoped>
.card-query-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-form-inline {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnQuery {
  margin-left: 10px;
}
.query-form-item {
  margin: 0px;
}
</style>